<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>家庭工具管理App</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="styles.css">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#FF7EB9', // 粉色主题
                        secondary: '#A78BFA', // 紫色辅助色
                        accent: '#FBBF24', // 黄色强调色
                        success: '#34D399',
                        warning: '#FBBF24',
                        danger: '#F87171',
                        info: '#60A5FA',
                        dark: '#1F2937',
                        light: '#FCFCFD',
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                    boxShadow: {
                        'custom': '0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03)',
                        'card': '0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.03)',
                    }
                }
            }
        }
    </script>
    <style>
        .app-container {
            max-width: 428px;
            height: 926px;
            border-radius: 44px;
            background-color: white;
            margin: 20px auto;
            position: relative;
            overflow: hidden;
            box-shadow: 0 0 0 10px #f0f0f0, 0 20px 50px rgba(0, 0, 0, 0.15);
        }
        .app-header {
            height: 56px;
            background-color: white;
            padding: 0 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #f0f0f0;
        }
        .app-header h1 {
            font-size: 20px;
            font-weight: 700;
            color: #1F2937;
        }
        .app-content {
            height: calc(100% - 56px - 83px);
            background-color: #FCFCFD;
            overflow-y: auto;
        }
        .app-nav {
            height: 83px;
            background-color: white;
            border-top: 1px solid #f0f0f0;
            display: flex;
            justify-content: space-around;
            align-items: center;
            position: absolute;
            bottom: 0;
            width: 100%;
        }
        .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            color: #9ca3af;
            transition: all 0.2s;
        }
        .nav-item.active {
            color: #FF7EB9;
        }
        .nav-item i {
            font-size: 22px;
        }
        .nav-item span {
            font-size: 12px;
            margin-top: 4px;
        }
        .iframe-container {
            height: 100%;
            width: 100%;
        }
        .iframe-container iframe {
            width: 100%;
            height: 100%;
            border: none;
        }
        /* 添加功能入口的样式 */
        .feature-entry {
            background-color: #fff;
            border-radius: 10px;
            margin: 15px;
            padding: 15px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
            transition: transform 0.2s, box-shadow 0.2s;
        }
        .feature-entry:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }
        .feature-entry-title {
            font-size: 18px;
            font-weight: 600;
            color: #16a34a;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
        }
        .feature-entry-title i {
            margin-right: 10px;
        }
        .feature-entry-description {
            color: #6b7280;
            font-size: 14px;
        }
    </style>
</head>
<body class="bg-gray-100">
    <div class="text-center p-4">
        <h1 class="text-2xl font-bold text-dark">家庭工具管理App</h1>
        <p class="text-gray-500">iPhone15模拟外观展示</p>
    </div>

    <!-- 应用容器 -->
    <div class="app-container">
        <!-- 顶部导航栏 -->
        <div class="app-header">
            <div class="flex items-center">
                <img src="" alt="Logo" class="h-8 w-8 mr-2">
                <h1>工具管理</h1>
            </div>
            <div class="flex items-center space-x-4">
                <button class="w-8 h-8 flex items-center justify-center rounded-full bg-gray-100">
                    <i class="fa fa-bell-o text-gray-600"></i>
                </button>
                <div class="w-8 h-8 rounded-full overflow-hidden border-2 border-pink-400">
                    <img src="" alt="头像" class="w-full h-full object-cover">
                </div>
            </div>
        </div>

        <!-- 内容区域 -->
        <div class="app-content">
            <!-- iframe容器，用于加载各功能页面 -->
            <div class="iframe-container">
                <iframe id="content-iframe" src="home.html" frameborder="0"></iframe>
            </div>
        </div>

        <!-- 底部导航栏 -->
        <div class="app-nav">
            <div class="nav-item active" data-page="home.html">
                <i class="fa fa-home"></i>
                <span>主页</span>
            </div>
            <div class="nav-item" data-page="tools.html">
                <i class="fa fa-wrench"></i>
                <span>工具</span>
            </div>
            <div class="nav-item" data-page="add_tool.html">
                <div class="w-12 h-12 rounded-full bg-pink-500 flex items-center justify-center -mt-4">
                    <i class="fa fa-plus text-white text-xl"></i>
                </div>
                <span>添加</span>
            </div>
            <div class="nav-item" data-page="statistics.html">
                <i class="fa fa-bar-chart"></i>
                <span>统计</span>
            </div>
            <div class="nav-item" data-page="settings.html">
                <i class="fa fa-cog"></i>
                <span>设置</span>
            </div>
        </div>
    </div>

    <!-- 功能页面索引入口 -->
    <div class="max-w-md mx-auto mt-6 mb-10">
        <div class="feature-entry">
            <a href="pages_index.html" target="_blank" class="block">
                <div class="feature-entry-title">
                    <i class="fa fa-th-large"></i>功能页面索引
                </div>
                <div class="feature-entry-description">
                    点击查看所有功能页面的快捷入口（网格布局）
                </div>
            </a>
        </div>
    </div>

    <script>
        // 获取所有导航项
        const navItems = document.querySelectorAll('.nav-item');
        const contentIframe = document.getElementById('content-iframe');

        // 添加导航点击事件
        navItems.forEach(item => {
            item.addEventListener('click', () => {
                // 移除所有激活状态
                navItems.forEach(nav => nav.classList.remove('active'));
                // 添加当前激活状态
                item.classList.add('active');
                // 获取页面地址
                const pageUrl = item.getAttribute('data-page');
                // 更新iframe内容
                contentIframe.src = pageUrl;
            });
        });

        // 当iframe加载完成后，更新状态栏时间
        contentIframe.addEventListener('load', function() {
            updateStatusBarTime();
        });

        // 更新状态栏时间
        function updateStatusBarTime() {
            const now = new Date();
            const hours = now.getHours().toString().padStart(2, '0');
            const minutes = now.getMinutes().toString().padStart(2, '0');
            const statusBar = document.querySelector('.iphone-status-bar div:first-child');
            statusBar.textContent = `${hours}:${minutes}`;
        }

        // 定时更新时间
        setInterval(updateStatusBarTime, 60000);
    </script>
</body>
</html>